<template>
  <div class="index">
 <a-layout>
          <a-layout-header>
              <div class="header">
                  <a-row :gutter="[20]">
                      <a-col :span="8"><div>
                        <svg-icon name="vue" size="50" />
                      </div></a-col>
                      <a-col :span="16">
                          <a-typography-title :level="3">{{ title }}<span class="version">v{{ version }}</span></a-typography-title>
                      </a-col>
                  </a-row>
                  <a-float-button  />
              </div>
          </a-layout-header>
          <a-layout-content>
              <div class="content">
                  <a-row justify="center">
                      <a-col :span="5"><div class="text vite">Vite</div></a-col>
                      <a-col :span="7"><div class="text ts">TypeScript</div></a-col>
                      <a-col :span="7"><div class="text vue">Vue3</div></a-col>
                      <a-col :span="5"><div class="text an">Antd</div></a-col>
                  </a-row>
                  <div class="dependency">
                      <a-tag :color="item.color" v-for="item in dependencies" :key="item.name">
                          {{item.name + ' v' + item.val}}
                      </a-tag>
                  </div>
              </div>
          </a-layout-content>
          <a-layout-footer>
              <div class="footer">
                  <a-typography-title :level="5">
                      <span class="f-i">powered by ibootTech</span>
                      <span class="f-i">luohong@iboot.tech</span>
                      <span class="f-i"> since @2025</span>
                  </a-typography-title>
              </div>
          </a-layout-footer>
      </a-layout>
  </div>
</template>
<script lang="ts">
import { Row, Col, Layout, Typography, Tag, FloatButton } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import { AppStore } from '@/app.store';
import { useRouter } from 'vue-router';
export default defineComponent({
    name: 'HomeIndex',
    components: {
        [Row.name]: Row,
        [Col.name]: Col,
        [Layout.name]: Layout,
        [Layout.Footer.name]: Layout.Footer,
        [Layout.Header.name]: Layout.Header,
        [Layout.Content.name]: Layout.Content,
        [Typography.Title.displayName]: Typography.Title,
        [Tag.name]: Tag,
        [FloatButton.name]: FloatButton
    },
    setup() {
        console.log(useRouter())
        const app = AppStore().getApp || {}
        const title = app.name || ''
        const version = app.version || ''
        const dependencies = ref([])
        $api.GET("/photos/1").then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
        const random = () => {
            const r = Math.floor(Math.random() * 192)
            return r.toString(16).length===1&&r.toString(16)<="f"?0+r.toString(16):r.toString(16)
        }
        const color = () => {
            let randomStr = '#'
            for (let i=0; i<3; i++) {
                randomStr += random()
            }
            return randomStr
        }
        Object.keys(app.dependencies).map(k => {
            dependencies.value.push({
                name: k,
                val: (app.dependencies[k as keyof object] as string).replaceAll('^', ''),
                color: color()
            })
        })
        return {
            title,
            version,
            dependencies
        }
    }
});
</script>
<style  scoped>
.index {
    overflow: hidden;
}
.ant-layout {
    height: 100vh;
    .ant-layout-header {
        background: white;
        height: 80px;
        line-height: 80px;
    }

    .header {
        width: 60vw;
        position: relative;
        .ant-col:first-child {
            text-align: right;
        }
        .version {
            font-size: 11px;
            color: #aaa;
            margin-left: 10px;

        }
    }
    .content {
        width: 1200px;
        margin: calc(50vh - 260px) auto;
        .text {
            font-size: 56px;
            font-weight: bold;
            text-align: center;
        }
        .vite {
            background: -webkit-linear-gradient( 120deg, #bd34fe 30%, #41d1ff );
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .ts {
            background: -webkit-linear-gradient( 120deg, #fa541c 30%, #d3f261 );
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .an {
            background: -webkit-linear-gradient( 315deg, #4096ff 25%, #36cfc9 );
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .vue {
            background: -webkit-linear-gradient(315deg,#42d392 25%,#647eff);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .dependency {
            margin-top: 20px;
            .ant-tag {
                margin-top: 10px;
            }
        }
    }
    .footer {
        width: 100%;
        text-align: center;
        .f-i {
            padding: 0 16px;
        }
        .f-i:nth-child(2) {
            border-left: 2px solid #999;
            border-right: 2px solid #999;
        }
    }
}
</style>
